<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Document</title>
    <script src="../../js/flexible.js"></script>
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/JLS/home.css">
    <link rel="stylesheet" href="../../css/JLS/footer.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <img src="../../img/icon/xiami.png" alt="" class="headerPic">
        <div class="searchBox">
            <img src="../../img/icon/search.png" alt="">
            <input type="text" class="searchInp">
        </div>
        <img src="../../img/icon/scan.png" alt="" class="headerPic">
    </header>
    <!-- 轮播图 -->
    <div class="banner" style="width:10rem">
        <ul class="pictures">
            <li class="pic">
                <a href="#">
                    <img src="../../img/banner/v2_q94qyd.png" alt="">
                </a>
            </li>
            <li class="pic">
                <a href="#">
                    <img src="../../img/banner/v2_q94r29.png" alt="">
                </a>
            </li>
            <li class="pic">
                <a href="#">
                    <img src="../../img/banner/v2_q9fq46.jpg" alt="">
                </a>
            </li>
        </ul>
        <ul class="dotsList">
            <li class=" dot active"></li>
            <li class=" dot"></li>
            <li class=" dot"></li>
        </ul>
    </div>
    <!-- 导航栏 -->
    <ul class="nav">
        <li class="menuList">
            <a href="#">
                <div class="menuIcon">
                    <img src="../../img/icon/appreciate_fill.png" alt="">
                </div>
                <div class="title">
                    新品推荐
                </div>
            </a>
        </li>
        <li class="menuList">
            <a href="#">
                <div class="menuIcon">
                    <img src="../../img/icon/form_fill.png" alt="">
                </div>
                <div class="title">
                    必买清单
                </div>
            </a>
        </li>
        <li class="menuList">
            <a href="#">
                <div class="menuIcon">
                    <img src="../../img/icon/hot_fill.png" alt="">
                </div>
                <div class="title">
                    热销榜
                </div>
            </a>
        </li>
        <li class="menuList">
            <a href="#">
                <div class="menuIcon">
                    <img src="../../img/icon/circle_fill.png" alt="">
                </div>
                <div class="title">
                    全部
                </div>
            </a>
        </li>
    </ul>
    <!-- 限时抢购 -->
    <ul class="flashSale">
        <li class="saleTitle">
            <img src="../../img/icon/flashsale.png" alt="">
            <span>限时抢购</span>
        </li>
        <li class="flashGoods">
            <!-- <div>
                <a href="#">
                    <img src="../../img/clothes/QQ图片20211215182709.jpg" alt="">
                    <span>￥199.00</span>
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="../../img/clothes/QQ图片20211215182744.jpg" alt="">
                    <span>￥199.00</span>
                </a>
            </div>
            <p class="line"></p>
            <div>
                <a href="#">
                    <img src="../../img/clothes/QQ图片20211215182754.jpg" alt="">
                    <span>￥199.00</span>
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="../../img/clothes/QQ图片20211215182759.jpg" alt="">
                    <span>￥199.00</span>
                </a>
            </div> -->
        </li>
    </ul>
    <!-- 新品上市 -->
    <div class="new">
        <div class="newPicture">
            <img src="../../img/banner/v2_q96eq2.jpg" alt="">
        </div>
        <ul class="newGoods">
            <!-- <li>
                <a href="#">
                    <img src="../../img/bag/QQ图片20211215183035.jpg" alt="">
                    <span>PINKO2021·新</span>
                    <span>￥299.99</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../../img/bag/QQ图片20211215183049.jpg" alt="">
                    <span>PINKO2021·新</span>
                    <span>￥299.99</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../../img/bag/QQ图片20211215183055.jpg" alt="">
                    <span>PINKO2021·新</span>
                    <span>￥299.99</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../../img/bag/QQ图片20211215183058.jpg" alt="">
                    <span>PINKO2021·新</span>
                    <span>￥299.99</span>
                </a>
            </li>
            <li class='bottomLi'>
                <a href="#">
                    <img src="../../img/bag/QQ图片20211215183101.jpg" alt="">
                    <span>PINKO2021·新</span>
                    <span>￥299.99</span>
                </a>
            </li>
            <li class='bottomLi'>
                <a href="#">
                    <img src="../../img/bag/QQ图片20211215183104.jpg" alt="">
                    <span>PINKO2021·新</span>
                    <span>￥299.99</span>
                </a>
            </li>
            <li class='bottomLi'>
                <a href="#">
                    <img src="../../img/bag/QQ图片20211215183055.jpg" alt="">
                    <span>PINKO2021·新</span>
                    <span>￥299.99</span>
                </a>
            </li>
            <li class='bottomLi'>
                <a href="#">
                    <img src="../../img/bag/QQ图片20211215183104.jpg" alt="">
                    <span>PINKO2021·新</span>
                    <span>￥299.99</span>
                </a>
            </li> -->
        </ul>
    </div>
    <!-- 美享全年 -->
    <div class="new new1">
        <div class="newPicture">
            <img src="../../img/banner/v2_q96ge7.jpg" alt="">
        </div>
        <ul class="newGoods bottom_goods">
            <!-- <li>
                <a href="#">
                    <img src="../../img/Lipstick/QQ图片20211215183215.jpg" alt="">
                    <span>YSL小金条</span>
                    <span>￥299.99</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../../img/Lipstick/QQ图片20211215183227.jpg" alt="">
                    <span>YSL小金条</span>
                    <span>￥299.99</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../../img/Lipstick/QQ图片20211215183230.jpg" alt="">
                    <span>YSL小金条</span>
                    <span>￥299.99</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../../img/Lipstick/QQ图片20211215183234.jpg" alt="">
                    <span>YSL小金条</span>
                    <span>￥299.99</span>
                </a>
            </li>
            <li class='bottomLi'>
                <a href="#">
                    <img src="../../img/Lipstick/QQ图片20211215183240.jpg" alt="">
                    <span>YSL小金条</span>
                    <span>￥299.99</span>
                </a>
            </li>
            <li class='bottomLi'>
                <a href="#">
                    <img src="../../img/Lipstick/QQ图片20211215183243.jpg" alt="">
                    <span>YSL小金条</span>
                    <span>￥299.99</span>
                </a>
            </li>
            <li class='bottomLi'>
                <a href="#">
                    <img src="../../img/Lipstick/QQ图片20211215183215.jpg" alt="">
                    <span>YSL小金条</span>
                    <span>￥299.99</span>
                </a>
            </li>
            <li class='bottomLi'>
                <a href="#">
                    <img src="../../img/Lipstick/QQ图片20211215183215.jpg" alt="">
                    <span>YSL小金条</span>
                    <span>￥299.99</span>
                </a>
            </li> -->
        </ul>
    </div>
    <!-- 折扣专区 -->


    <!-- 底部 -->
    <footer>
        <ul class="footerNav">
            <li class="home footeractive">
                <img src="../../img/icon/xiami.png" alt="">
                <span>首页</span>

            </li>
            <li class="classify">
                <img src="../../img/icon/sort.png" alt="">
                <span>分类</span>

            </li>
            <li class="shoppingCart">
                <img src="../../img/icon/cart.png" alt="">
                <span>购物车</span>

            </li>
            <li class="my">
                <img src="../../img/icon/people.png" alt="">
                <span>我</span>
            </li>
        </ul>
    </footer>
</body>

<!-- <script src="../../js/JLS/home.js"></script> -->
<script src="../../js/JLS/footer.js"></script>
<script src="../../js/JLS/banner.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    let flashGoodsEl = document.querySelector('.flashGoods')
    let newGoodsEl = document.querySelector('.newGoods')
    let botGoodsEl = document.querySelector('.bottom_goods')
    void(async function getGoods() {
        let allGoods = await axios({
            method: 'get',
            url: 'http://127.0.0.1:9527/api/data/getAllGoods',
        })
        let allGoodsData = allGoods.data.data
        console.log(allGoodsData[1]);
        for (i = 0; i < 4; i++) {
            let dataIdx = Math.floor((Math.random() * 50))
            let flash = document.createElement('div')
            flash.innerHTML = `
                <a class="goods" data-name="${allGoodsData[dataIdx].cartName}" href="#">
                    <img src="${allGoodsData[dataIdx].cartImg}" alt="">
                    <span>￥${allGoodsData[dataIdx].cartPrice}</span>
                </a>
            `
            flashGoodsEl.appendChild(flash)
        }
        for (i = 0; i < 8; i++) {
            let dataIdx = Math.floor((Math.random() * 50))
            let flash = document.createElement('li')
            if (i < 4) {
                flash.innerHTML = `
                    <a class="goods" data-name="${allGoodsData[dataIdx].cartName}" href="#">
                        <img src="${allGoodsData[dataIdx].cartImg}" alt="">
                        <span>￥${allGoodsData[dataIdx].cartPrice}</span>
                    </a>
                `
                newGoodsEl.appendChild(flash)
            } else {
                flash.classList.add('bottomLi')
                flash.innerHTML = `
                    <a class="goods" data-name="${allGoodsData[dataIdx].cartName}" href="#">
                        <img src="${allGoodsData[dataIdx].cartImg}" alt="">
                        <span>￥${allGoodsData[dataIdx].cartPrice}</span>
                    </a>
                `
                newGoodsEl.appendChild(flash)
            }

        }
        for (i = 0; i < 8; i++) {
            let dataIdx = Math.floor((Math.random() * 50))
            let flash = document.createElement('li')
            if (i < 4) {
                flash.innerHTML = `
                    <a class="goods" data-name="${allGoodsData[dataIdx].cartName}" href="#">
                        <img src="${allGoodsData[dataIdx].cartImg}" alt="">
                        <span>￥${allGoodsData[dataIdx].cartPrice}</span>
                    </a>
                `
                botGoodsEl.appendChild(flash)
            } else {
                flash.classList.add('bottomLi')
                flash.innerHTML = `
                    <a class="goods" data-name="${allGoodsData[dataIdx].cartName}" href="#">
                        <img src="${allGoodsData[dataIdx].cartImg}" alt="">
                        <span>￥${allGoodsData[dataIdx].cartPrice}</span>
                    </a>
                `
                botGoodsEl.appendChild(flash)
            }

        }

        document.body.onclick = function (e) {
            let targetEl = e.target
            let thisGoodsEl = targetEl.closest('.goods')
            if (thisGoodsEl) {
                let cartName = thisGoodsEl.dataset.name
                localStorage.setItem("cartName", cartName)
                let timer = setTimeout(() => {
                    location.href = "../WXL/shop.html"
                })
            }
        }
    })()
</script>

</html>